<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>07双坐标系</title>
  <!--    引入echarts依赖包-->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 100%;
      height: 400px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

<script>
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.querySelector('.box'));

  // 指定图表的配置项和数据
  let option = {
    // 标题
    title: {
      text: '双坐标',
    },
    xAxis: {
      // 类目轴  常用于离散的数据
      data: ['游戏', '电商', '教育', '医疗']
    },
    yAxis: [
      {
        axisLine: {
          show: true
        },
        axisTick: {
          show: true
        }
      },
      {
        axisLine: {
          show: true
        },
        axisTick: {
          show: true
        }
      }

    ],
    // 系列
    series: [
      {
        type: 'line',
        data: [10, 20, 30, 40],
        // 指定使用哪个坐标系
        yAxisIndex: 0
      },
      {
        type: 'bar',
        data: [10, 20, 30, 40],
        yAxisIndex: 1
      }
    ],


  };

  myChart.setOption(option)
</script>
